<template>
  <div>
    <div class="container bgc-gray">
        <p class="date">{{info.date}}</p>
        <div ref="context" class="content-container" :class="{
          'show-all': moreFlag
        }">{{info.content}}</div>
        <button class="more-btn bgc-gray" v-show="showMoreFlag" @click="moreFlag = !moreFlag">{{moreText}}</button>
      <div class="image-container">
        <van-image class="img" v-for="(item,index) in info.imageList" :key="index" :src="item" width='90px' height="90px" @click.native="imageView(index)"></van-image>
      </div>
    </div>
  </div>
</template>

<script>
import { Image as VanImage, ImagePreview } from 'vant';

export default {
  props: {
    info: {
      require: true,
      type: Object,
    },
  },
  components: {
    [VanImage.name]: VanImage,
  },
  mounted() {
    const el = this.$refs.context;
    if (el.scrollHeight > el.clientHeight) {
      // 文本溢出
      this.showMoreFlag = true;
    }
  },
  data() {
    return {
      showMoreFlag: false,
      moreFlag: false,
    };
  },
  computed: {
    moreText() {
      return this.moreFlag ? '收起 ∧' : '展开全部 ∨';
    },
  },
  methods: {
    imageView(index) {
      ImagePreview({
        images: this.info.imageList,
        startPosition: index,
      });
    },
  },
};
</script>

<style scoped>
@import url('../../assets/styles/index.css');
.container{
  padding: 0px 10px 20px 10px;
  display: flow-root;
  margin: 15px 0px;
}
.date{
  margin: 18px 0px 10px 0px;
  font-weight: bolder;
  font-size: 18px;
}
.content-container{
  line-height: 1.5;
  max-height: 6em;
  overflow: hidden;
}
.show-all{
  max-height: none;
}
.more-btn{
  margin-top: 10px;
  font-size: 14px;
  float: right;
  border: none;
  color: rgba(31, 31, 241, 0.829);
}
.image-container{
  display: flex;
  width: 100%;
  flex-wrap: wrap;
}
.image-container .img{
  margin: 10px 6px;
}
</style>
